<template>
  <div>
    <div class="content-padding">
      <div class="contents" style="text-align: center;">
        <!-- <a-button @click="dianji">dianji</a-button> -->
        <!-- <AreaSelect :selectedAddress="selectedAddress" @changeArea="changeArea"></AreaSelect> -->
        <ModalAgain ref="ModalAgainRefs" @clickLeft="clickLeft" @clickRight="clickRight"></ModalAgain>
        <img class="homeimg" src="@/assets/img/home.png" />
        <p class="welcome">欢迎使用{{ systemName }}</p>
      </div>
    </div>
  </div>

</template>

<script>
import ModalAgain from '../../components/ModalAgain/index.vue'
import { debounce } from '@/utils/debounce.js'
export default {
  data () {
    return {
      selectedAddress: {

      }
    }
  },
  computed: {
    systemName () {
      return this.$store.state.setting.systemName
    }
  },

  methods: {

    clickLeft () {

    },
    clickRight () {

    },
    dianji () {
      debounce(() => {

      })
    },
    changeArea (idObj, nameObj) {
      this.selectedAddress = idObj
      this.addressList = nameObj
      console.log(this.selectedAddress, 12)
      console.log(this.addressList, 34)
    }
  }, // components: { AreaSelect }

  components: { ModalAgain }
}
</script>

<style scoped lang="less">
.homeimg {
  width: 90%;
  height: auto;
  max-width: 1025px;
  display: block;
  margin: 50px auto 0 auto;
}

.welcome {
  margin-top: 17px;
  width: 100%;
  height: 50px;
  font-size: 36px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #c0c4cc;
  line-height: 50px;
  text-align: center;
}
</style>
